<template>
  <div>
    <div class="main">
      <ul>
        <li>
          <a href="javascript:" @click="Collection(id)"><span class="pos"><i
            class="el-icon-star-off" :class="{'choose':item.collect}"></i>{{item.collect_size}}</span></a>
        </li>
        <!--<li>-->
        <!--<a href="javascript:" @click="Repost(id)"><span class="pos"><i class="el-icon-delete"></i>转发</span></a>-->
        <!--</li>-->
        <li>
          <a href="javascript:" @click=" show = !show"><span class="pos"><i
            class="iconfont ls-pinglun"></i></span></a>
        </li>
        <li>
          <a href="javascript:" @click="Like(id)"><span class="pos"><i
            class="iconfont ls-zan1" :class="{'choose':item.vote}"></i>{{item.vote_size}}</span></a>
        </li>
      </ul>
    </div>
    <Comment v-if="show" :post="item"></Comment>
  </div>
</template>
<script>
  import Comment from './comment'

  import { voteAdd, collectOption } from '@/public/api'

  export default {
    components: {Comment},
    props: ['id', 'item'],
    data () {
      return {
        collect: true,
        like: true,
        show: false
      }
    },
    computed: {
      User_id () {
        return this.$store.state.user_id
      }
    },
    methods: {
      Collection () {
        let option = this.item.collect ? 'delete' : 'add'
        collectOption({
          post_id: this.item.id,
          user_id: this.User_id
        }, option).then(
          data => {
            if (data.status) {
              this.item.collect = !this.item.collect
              console.log(`${option}成功`)
            }
          }
        ).catch(data => {})
        if (this.item.collect) {
          this.item.collect_size--
        } else {
          this.item.collect_size++
        }
        this.$emit('Collection', this.id)
      },
      Repost (id) {
        this.$emit('Repost', this.id)
      },
      Comment (id) {
//        this.$emit('Comment', this.item)
      },
      Like (id) {
        let option = this.item.vote ? 'delete' : 'add'
        voteAdd({
          post_id: this.item.id,
          user_id: this.User_id
        }, option).then(data => {
          if (data.status) {
            this.item.vote = !this.item.vote
          }
        }).catch(message => {
        })
        if (this.item.vote) {
          this.item.vote_size--
        } else {
          this.item.vote_size++
        }
        this.$emit('Like', this.id)
      }
    }
  }
</script>
<style>
  .main {
    width: 600px;
    height: 42px;
    line-height: 40px;
    overflow: hidden;
  }

  .main ul {
    padding: 0;
    margin: 0 -2px;
    border-top: 1px solid gray;
    text-align: center;
    overflow: hidden;
  }

  .main ul li {
    vertical-align: middle;
    display: inline-block;
    list-style: none;
    height: 40px;
    line-height: 40px;
    width: 200px;
    float: left;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
  }

  .main ul li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #8090B5;
  }

  .choose {
    color: #ffb388;
  }
</style>
